import React, { useState,useEffect } from 'react';
import {
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Mentions,
    Select,
    TimePicker,
    TreeSelect,
  } from 'antd';
type CformItemProps = {
    type:string,
    name:string,
    value?:any;
    placeholder?:string;
    disabled?:boolean;
    required?:boolean;
    options?:any[];
    rules?:any[];
    form:any,
    fieldNames?:any;
    multiple?:boolean;
    searchable?:boolean;
    onChange?:(values:string)=>void;

}

const CformItem:React.FC<CformItemProps> = (props) => {


    const changeinput = (v:any) => {
        let value = v.target.value;
        props.form.setFieldsValue({[props.name]:value})
    }
    const changeselect = (v:any) => {
        let value = v;
        console.log(value);
        props.form.setFieldsValue({[props.name]:value})
    }
    const changeCascader = (v:any) => {
        let value = v;
        console.log(value);
        if(Array.isArray(value)&&value.length>0){
            value = value[value.length-1];
        }
        props.form.setFieldsValue({[props.name]:value})
    }
    const searchCascader = (v:string)=>{
        console.log(v);
    }
    const getComs = (type:string,props:any) => {
        switch (type) {
            case 'input':
                return <Input 
                        onChange={(v:any)=>{changeinput(v)}} 
                        placeholder={props.placeholder} 
                        disabled={props.disabled} 
                        allowClear={true}
                        />;
            case 'inputNumber':
                return <InputNumber 
                        onChange={(v:any)=>{changeinput(v)}} 
                        placeholder={props.placeholder} 
                        disabled={props.disabled}
                        />;
            case 'select':
                return <Select 
                        onChange={(v:any)=>{changeselect(v)}} 
                        options={props.options} 
                        placeholder={props.placeholder} 
                        disabled={props.disabled}
                        allowClear={true} 
                        />
            case 'timePicker':
                return <TimePicker 
                        placeholder={props.placeholder} 
                        disabled={props.disabled} 
                        />;
            case 'datePicker':
                return <DatePicker 
                        placeholder={props.placeholder} 
                        disabled={props.disabled} 
                        allowClear={true}
                        />;
            case 'cascader':
                return <Cascader 
                        fieldNames={props.fieldNames} 
                        onChange={(v:any)=>{changeCascader(v)}} 
                        placeholder={props.placeholder} 
                        options={props.options} 
                        disabled={props.disabled} 
                        allowClear={true}
                        showSearch={props.searchable}
                        changeOnSelect={true}
                        onSearch={(v:any)=>{searchCascader(v)}}
                        />     
        }
    }    
    return (
        <>
            {getComs(props.type,props)}
        </>
    )
}

export default CformItem;